<script setup lang="ts">
import { isAccountFn } from '@/utils'
import { ACCOUNT_TYPES, INDUSTRYS } from '@/constants'

const isAccount = ref(isAccountFn())
const visible = defineModel<boolean>()
const isEditing = ref(false)
const infoLoading = ref(false)

const form = reactive({
  uuid: '',
  name: '',
  type: '',
  company: '',
  industry: '',
})
const userForm = reactive({
  uuid: '',
  name: '',
  trueName: '',
  department: '',
  roles: [],
})
watch(visible, (val) => {
  if (val)
    queryInfo()

  else
    isEditing.value = false
})
async function queryInfo() {
  infoLoading.value = true
  const result = await useRequest('GetAccount') as any
  if (result.success) {
    form.uuid = result.inventory.uuid
    form.name = result.inventory.name
    form.type = result.inventory.type
    form.company = result.inventory.company
    form.industry = result.inventory.industry
  }
  if (!isAccount.value) {
    const userRes = await useRequest('GetUser')
    if (userRes.success) {
      userForm.uuid = userRes.inventory.uuid
      userForm.name = userRes.inventory.name
      userForm.trueName = userRes.inventory.trueName
      userForm.department = userRes.inventory.department
      userForm.roles = userRes.inventory.roles
    }
  }
  infoLoading.value = false
}
async function onSubmit() {
  infoLoading.value = true
  const params = isAccount.value ? form : { uuid: userForm.uuid, trueName: userForm.trueName }
  const apikey = isAccount.value ? 'UpdateAccount' : 'UpdateUser'
  const result = await useRequest(apikey, params)
  infoLoading.value = false

  if (result.success) {
    ElNotification({
      type: 'success',
      message: '修改成功',
    })
  }
  isEditing.value = false
}
</script>

<template>
  <el-dialog v-model="visible" title="账户信息" width="500px" append-to-body>
    <div v-loading="infoLoading">
      <el-descriptions
        :column="1"
        border
      >
        <el-descriptions-item label="账户名">
          {{ form.name }}
        </el-descriptions-item>
        <el-descriptions-item label="账户类型">
          {{ ACCOUNT_TYPES[form.type] }}
        </el-descriptions-item>
        <el-descriptions-item label="公司名称" :span="2">
          <el-input v-if="isEditing && isAccount" v-model="form.company" />
          <p v-else>
            {{ form.company }}
          </p>
        </el-descriptions-item>
        <el-descriptions-item label="所属行业">
          <el-select
            v-if="isEditing && isAccount"
            v-model="form.industry"
            placeholder="请选择所属行业"
          >
            <el-option
              v-for="item in INDUSTRYS"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <p v-else>
            {{ form.industry }}
          </p>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        v-if="!isAccount"
        class="user-info"
        :column="1"
        title="子用户信息"
        border
      >
        <el-descriptions-item label="用户名">
          {{ userForm.name }}
        </el-descriptions-item>

        <el-descriptions-item label="姓名">
          <el-input v-if="isEditing" v-model="userForm.trueName" />
          <p v-else>
            {{ userForm.trueName }}
          </p>
        </el-descriptions-item>

        <el-descriptions-item label="部门">
          {{ userForm.department }}
        </el-descriptions-item>
        <el-descriptions-item label="角色">
          {{ userForm.roles[0]?.name }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button v-if="!isEditing" type="primary" @click="isEditing = true">
          修改
        </el-button>
        <el-button v-else type="primary" @click="onSubmit">
          保存
        </el-button>

      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
  .el-descriptions :deep(.el-descriptions__label) {
  width: 140px !important;
}
.user-info {
  margin-top: 10px;
}
</style>
